<template>
  <div>
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
    >
        <div style="margin: auto 5px">
          <img style="width: 40px;" src="../../public/logo.svg">
        </div>
       <div style="margin: auto 0">
         <b style="font-size: 20px;line-height: 40px">灵动创意考试系统 - 管理后台</b>
       </div>
      <div class="flex-grow" />
      <el-menu-item index="1" @click="this.$router.push('/home')">首页</el-menu-item>
      <el-menu-item index="2" @click="this.$router.push('/exma')">创建考试</el-menu-item>
      <el-menu-item index="3" @click="this.$router.push('/exmalist')">考试管理</el-menu-item>
      <el-menu-item index="4">题目管理</el-menu-item>
      <el-menu-item index="5">考生管理</el-menu-item>
      <el-menu-item index="6">我的任务</el-menu-item>
      <el-dropdown class="account">
        <span class="el-dropdown-link" style="color: #409EFF">
          <el-icon><UserFilled /></el-icon>
          {{ userInfo.userName }}
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item style="color: #F56C6C" icon="SwitchButton" @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-menu>
    <el-watermark :content="userInfo.userId" :font="font">
      <div style="padding: 20px 100px">
        <router-view></router-view>
      </div>
    </el-watermark>
  </div>
</template>

<script>
export default {
  name: "BaseView",
  data(){
    return{
      activeIndex: "1",
      userInfo: {},
      font: {
        fontSize: 16,
        color: 'rgba(0, 0, 0, 0.08)',
      },
    }
  },
  mounted() {
    this.$nextTick(() => {
      let info =  localStorage.getItem("token")
      this.userInfo = JSON.parse(info)
    })
  },
  methods: {
    logout(){
      this.$request.get("/user/logout").then((res) => {
        if (res.code === 0) {
          this.$message({
            message: "退出成功",
            type: "success"
          });
        }
      })
      localStorage.removeItem("token");
      this.$router.push({
        path: "/login"
      });
    }
  }
}
</script>

<style scoped>
  .flex-grow {
    flex-grow: 1;
  }
  .account {
    margin: auto 20px;
  }
</style>
